<!-- 任务 views/Task.vue -->
<template>
  <div class="task">
    <van-tabs
      sticky
      class="tab-header"
      v-model="activeName"
      background="#5fd1b3"
      color="#fff"
      title-inactive-color="#fff"
      title-active-color="#fff"
      @click="tabChange"
    >
      <van-tab title="待处理" name="pending">
        <van-skeleton title :row="3" :loading="loading">
          <ul>
            <router-link tag="li" :to="{path:'/taskDetail/'+item.lsStatus+'/'+item.workOrderId}"  v-for="item in masterPendingOrders"  :key="item.workOrderId">
              <sCard :orderInfo="item"></sCard>
            </router-link>
          </ul>
        </van-skeleton>
      </van-tab>
      <van-tab title="已完成" name="completed">
        <ul>
          <router-link tag="li" :to="{path:'/taskDetail/'+item.lsStatus+'/'+item.workOrderId}" v-for="item in masterCompletedOrders" :key="item.workOrderId">
            <sCard :orderInfo="item"></sCard>
          </router-link>
        </ul>
      </van-tab>
      <van-tab title="全部" name="all">
        <ul>
          <router-link tag="li" :to="{path:'/taskDetail/'+item.lsStatus+'/'+item.workOrderId}" v-for="item in masterOrders" :key="item.workOrderId">
            <sCard :orderInfo="item"></sCard>
          </router-link>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import sCard from '@/components/sCard'
export default {
  data() {
    return {
      loading: true,
      activeName: 'pending'
    }
  },
  components: {
    sCard
  },
  computed: {
    ...mapState(['masterOrders', 'activeTabName']),
    ...mapGetters(['masterPendingOrders', 'masterCompletedOrders'])
  },
  methods: {
    tabChange(name, title) {
      this.$store.commit('setActiveTab', name)
    }
  },
  mounted() {
    this.$store.dispatch('getMasterOrders')
    this.$store.dispatch('getOrderDetail',0)
    this.loading = false
    this.activeName = this.activeTabName
  }
}
</script>
<style lang="less" scoped>
.van-tabs__wrap {
  background-color: @main-color;
  padding-top: 20px;
}
ul {
  padding: 0 15px 70px;
}
</style>
